<template>
  <view class="bd" style="height: 100vh">
    <view class="person">
      <userHead></userHead>
    </view>
    <view class="project bd" v-for="(item, index) in list">
      <view class="items">
        <view class="item1 flex flex-j-b">
          <view class="flex">
            <view class="title t1">
              {{ item.title }}
            </view>
            <view class="complete" v-show="item.isFinish == false">
              未完成
            </view>
            <view class="complete1" v-show="item.isFinish == true">
              已完成
            </view>
          </view>
          <view
            class="status"
            @tap="goEvaluationPaper(index)"
            v-show="item.isFinish == false"
          >
            去评测
          </view>
          <view
            class="status1"
            @tap="goEvaluationResults(index)"
            v-show="item.isFinish == true"
          >
            查看结果
          </view>
        </view>
        <view class="uni-item-line" style="padding: 10upx 0"> </view>
        <view class="inner t1">
          <view class="titles"> 评测项目 </view>
          {{ item.item }}
          <u-row gutter="16">
            <u-col span="12" class="context t1">
              <u-collapse-item :key="index">
                {{ item.objective }}
              </u-collapse-item>
            </u-col>
          </u-row>
        </view>
      </view>
      <view style="border-bottom: 1upx solid #eaeaea"></view>
    </view>

    <!-- 		<view class="edit">
			<u-icon name="edit-pen-fill" color="#fff" size="45"></u-icon>
		</view> -->
  </view>
</template>

<script>
import userHead from "../../../../components/home-head/easy_head.vue";
export default {
  components: {
    userHead,
  },
  data() {
    return {
      list: "",
    };
  },
  onLoad() {
    this.goData();
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  onShow() {
    this.goData();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    goData() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/evaluating/getList", {
          itemType: 1,
          pageNum: 1,
          pageSize: 99,
        })
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    goEvaluationPaper(index) {
      let id = this.list[index].id; //获取当点击的id
      this.$store.state.idx = this.list[index].id;
      this.$store.state.testType = this.list[index].itemType; //获取当前评测类型
      uni.navigateTo({
        url: "/pages/main/child/archives/evaluation-paper?id=" + id + "&rid=0",
      });
    },
    goEvaluationResults(index) {
      let id = this.list[index].id; //获取当点击的id
      this.$store.state.idxs = this.list[index].id;
      this.$store.state.testType = this.list[index].itemType; //获取当前评测类型
      let name = this.list[index].title; //获取当点击的title
      uni.navigateTo({
        url:
          "/pages/main/child/archives/view_answer_records?id=" +
          id +
          "&name=" +
          name,
      });
    },
  },
};
</script>

<style lang="less" scoped>
//头像部分
.person {
  width: 100%;
  height: 200rpx;
  background-color: #18c7e1;
  display: flex;
  // justify-content: center;
  align-items: center;
  .item {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 40upx;
    .headimg {
      width: 20%;
      display: inline-block;
      text-align: center;
      .img {
        width: 80upx;
        height: 80upx;
        border-radius: 50%;
      }
      .img_active {
        width: 110upx;
        height: 110upx;
        border-radius: 50%;
      }
      .text {
        margin-top: 5upx;
        font-size: 30upx;
        color: #ffffff;
      }
    }
  }
}
//评测部分
.project {
  width: 100%;
  padding-top: 30upx;
  .complete {
    width: 120upx;
    height: 50upx;
    background-image: url(../../../../static/img/incompleted.png);
    background-size: 100% 100%;
    color: #ffffff;
    font-size: 30upx;
    margin-left: 10upx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .status {
    font-size: 30upx;
    color: #f88e3a;
  }
  .complete1 {
    width: 120upx;
    height: 50upx;
    background-image: url(../../../../static/img/completed.png);
    background-size: 100% 100%;
    color: #ffffff;
    font-size: 30upx;
    margin-left: 10upx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .status1 {
    font-size: 30upx;
    color: #b6b6b6;
  }
  .img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30upx;
    padding-right: 5upx;
    image {
      width: 15upx;
      height: 25upx;
    }
  }
  .img1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30upx;
    padding-right: 5upx;
    image {
      width: 25upx;
      height: 15upx;
    }
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10upx;
    color: #949494;
  }
  .items {
    width: 100%;
    padding: 20upx 40upx;
    .item1 {
      width: 100%;
      height: 50upx;
      align-items: center;
      .title {
        height: 50upx;
        font-size: 35upx;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .item2 {
      width: 100%;
      // height: 50upx;
      padding-top: 20upx;
      align-items: center;
      .title {
        font-size: 25upx;
        padding: 7upx;
        color: #cccccc;
        border: 1upx solid #cccccc;
        border-radius: 10upx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
}
.inner {
  .titles {
    font-size: 25upx;
    padding: 7upx;
    color: #cccccc;
    border: 1upx solid #cccccc;
    border-radius: 10upx;
    width: 150upx;
    text-align: center;
    display: inline-block;
    margin: 20rpx 20rpx 0 0;
  }
  .context {
    margin-top: -30px;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  //  黑暗模式
  .bd {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
  .inp {
    color: #e5e8e8 !important;
  }
}
</style>
